<template>
    <div class='comment'>
        <div class="total">
            <p>收到评价<span>1231231</span>条</p>
            <p>好评率<span class="ratings">99%</span></p>
        </div>
        <div class="comment_list">
            <div class="left">
                <img src="../../../static/index/avatar.png" alt="">
               <div class='info'>
                    <p class="intr">
                        <span class="username">用户名</span>
                        <span class="data">2018-10-03</span>
                    </p>
                    <p class="pingjia">特别好的一本书</p>
               </div>
            </div>
            <div class="right">
                好评
            </div>
        </div>

         <div class="comment_list">
            <div class="left">
                <img src="../../../static/index/avatar.png" alt="">
               <div class='info'>
                    <p class="intr">
                        <span class="username">用户名</span>
                        <span class="data">2018-10-03</span>
                    </p>
                    <p class="pingjia">特别好的一本书</p>
               </div>
            </div>
            <div class="right">
                好评
            </div>
        </div>
    </div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.comment {
  padding: 0 18rpx;
  .total {
    display: flex;
    justify-content: space-between;
    height: 86rpx;
    border-bottom: 1px solid #dddddd;
    p {
      height: 100%;
      line-height: 86rpx;
      text-align: center;
      color: #2b2b2b;
      font-size: 26rpx;
      .ratings {
        color: #c75050;
        font-size: 30rpx;
      }
    }
  }
  .comment_list {
    display: flex;
    justify-content: space-between;
    height: 142rpx;
    border-bottom: 1px solid #ddd;
    .left {
      display: flex;
      justify-content: space-between;
      img {
        width: 82rpx;
        height: 82rpx;
        border: 1px solid #ddd;
        border-radius: 50%;
        margin-top: 30rpx;
        margin-right: 20rpx;
      }
      .info {
        .intr {
          margin-top: 25rpx;
        }
        p {
          .username {
            font-size: 34rpx;
            font-weight: 700;
            color: #333;
          }
          .data {
            font-size: 26rpx;
            color: 666;
            margin-left: 20rpx;
          }
          &.pingjia {
            margin-top: 5rpx;
            font-size: 30rpx;
            color: #2b2b2b;
          }
        }
      }
    }
    .right {
      color: #c75050;
      font-size: 30rpx;
      padding-left: 40rpx;
      line-height: 142rpx;
      font-weight: 700;
      background: url('../../../static/index/good.png') no-repeat left center;
      background-size: 26rpx 26rpx;
    }
  }
}
</style>
